<template>
  <el-dialog
    v-dialogDrag
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :before-close="cancel"
    :show-close="true"
    title="试驾详情"
    width="75%"
    @opened="searchHandle"
  >
    <div class="app-container">
      <!-- 活动信息列表 -->
      <div class="table">
        <div class="tableHead">
          <div class="btnGroup">
            <el-button-group>
              <el-button type="primary" icon="el-icon-download" @click="exportData" >导出</el-button>
            </el-button-group>
          </div>
        </div>
        <baseTable v-loading="loading" ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
          <el-table-column type="index" label="序号" min-width="50"/>
          <el-table-column prop="user_name" label="客户名称" min-width="110" />
          <el-table-column prop="phone" label="电话" min-width="110"/>
          <el-table-column prop="dealer_name" label="经销商" min-width="220" />
          <el-table-column prop="series_name" label="意向车型" min-width="120"/>
          <el-table-column prop="sell_user" label="销售顾问" min-width="150" />
          <el-table-column :formatter="dateFormat" prop="drive_date" label="试驾时间" min-width="120" />
          <el-table-column :formatter="dateFormat" prop="pre_buy_date" label="预购时间" min-width="120" />
          <el-table-column prop="remark" label="备注" min-width="150" />
        </BaseTable>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { queryDrive, exportDrive } from '@/api/admin/auth/gms/userDrive.js'
import BaseTable from '@/components/BaseTable'
import filterCode from '@/components/Checkbox/filtercode'
import rSelect from '@/components/Select/Select'
import dealerSelect from '@/views/admin/auth/gms/userDrive/selectDealer.vue'
import sellSelect from '@/views/admin/auth/gms/userDrive/selectSell.vue'
import formMixins from '@/mixins/formMixins'
import moment from 'moment'
import { exportFile } from '@/utils'
// eslint-disable-next-line no-unused-vars
import _ from 'lodash'

export default {
  name: 'UserDrive',
  components: {
    BaseTable,
    rSelect,
    filterCode,
    dealerSelect,
    sellSelect

  },
  mixins: [formMixins],
  props: {
    dialogVisible: false
  },
  data() {
    return {
      loading: false,
      editDialog: false,
      openSelectDealer: false,
      openSelectSell: false,
      dealerCode: '',
      // 搜索栏
      search: {
        limit: 10,
        pageNum: 1,
        userName: '',
        phone: '',
        seriesId: '',
        driveDate: '',
        preBuyDate: ''
      },
      editForm: {
        drive_id: '',
        dealer_code: '',
        dealer_name: '',
        sell_user: '',
        sell_id: '',
        pre_buy_date: '',
        remark: ''
      }
    }
  },
  computed: {},
  mounted() {
    this.searchHandle()
  },
  methods: {
    // 查询试驾信息
    searchHandle() {
      this.loading = true
      const table = this.$refs['table']
      queryDrive(this.search)
        .then(res => {
          table.complete().filData(res)
          this.loading = false
        })
        .catch(err => {
          table.complete()
        })
    },
    cancel() {
      this.$emit('update:dialogVisible', false)
    },
    // 导出
    exportData() {
      exportDrive(this.search)
        .then(res => {
          for (let i = 0; i < res.length; i++) {
            res[i].dirve_date = moment(res[i].dirve_date).format('YYYY-MM-DD HH:mm')
            res[i].pre_buy_date = moment(res[i].pre_buy_date).format('YYYY-MM-DD HH:mm')
          }
          const option = {
            tHeader: ['客户名称', '电话', '意向车型', '经销商', '销售顾问', '试驾时间', '预购时间', '备注'],
            filterVal: ['user_name', 'phone', 'series_name', 'dealer_name', 'sell_user', 'dirve_date', 'pre_buy_date', 'remark'],
            table: res,
            fileName: '试驾信息导出'
          }
          exportFile(option, () => {
          })
        })
        .catch(err => {})
    },

    // 日期格式化
    dateFormat: function(row, column) {
      var date = row[column.property]
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return ''
      }
    }

  }
}
</script>

<style scoped>
</style>
